<template>
    <div class="sLoadViewP" v-show="mData.loadState!=ImgLoadState.SUCCESS">
        <div class="sLoadBg"></div>

        <van-loading class="sLoadIcon" v-show="mData.loadState===ImgLoadState.LOADING" type="circular"
            color="#1989fa" />
        <div class="sLoadStateImgP" v-show=" mData.loadState!=ImgLoadState.LOADING">
            <img class="sLoadStateImg" :src="mData.imgStateUrl">
            <div>{{mData.tipMsg}}</div>
        </div>

    </div>
</template>

<script setup lang="ts">

import { ImgLoadState } from '@/data/constant/ImgLoadType';
import { getAssetsFile } from '@/utils/YcAssetUtil';
import { ref } from 'vue';
type Data = {
    loadState: ImgLoadState,
    imgStateUrl: string,
    tipMsg: string
}
const mData = ref<Data>({
    loadState: ImgLoadState.INIT,
    imgStateUrl: getAssetsFile("ic_pic_loading.png"),
    tipMsg: "加载中..."
})

const setLoadState = (loadState: ImgLoadState) => {
    if (mData.value.loadState != loadState) {
        mData.value.loadState = loadState
        switch (loadState) {
            case ImgLoadState.EMPTY: {
                mData.value.imgStateUrl = getAssetsFile("ic_pic_error.png")
                mData.value.tipMsg = "暂无"
                break
            }
            case ImgLoadState.ERROR: {
                mData.value.imgStateUrl = getAssetsFile("ic_pic_error.png")
                mData.value.tipMsg = "加载失败"
                break
            }
            case ImgLoadState.LOADING: {
                mData.value.imgStateUrl = getAssetsFile("ic_pic_loading.png")
                mData.value.tipMsg = "加载中..."
                break
            }
        }
    }
}
defineExpose({
    setLoadState
})
</script>
<style scoped>
.sLoadViewP {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    z-index: 99;
    background-color: black;
}

.sLoadIcon {
    position: absolute;
    /* 3. 设置该元素的偏移量，值为 50%*/
    left: 50%;
    top: 50%;
    /* 通过translate反向偏移的方式，实现居中 */
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.sLoadBg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    background-color: #E4E4E4;
}

.sLoadStateImgP {
    position: absolute;
    /* 3. 设置该元素的偏移量，值为 50%*/
    left: 50%;
    top: 50%;
    /* 通过translate反向偏移的方式，实现居中 */
    transform: translate(-50%, -50%);
    text-align: center;
}

.sLoadStateImg {
    width: 30px;
    height: 30px;
    object-fit: contain;
}
</style>
